<template>
  <view class="my-container">
    <!-- 用户信息卡片 -->
    <view class="user-card" @click="handleLogin">
      <image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" />
      <view class="user-info">
        <text class="nickname">{{ userInfo.nickName || '点击登录' }}</text>
        <text class="desc">{{ userInfo.desc || '欢迎使用小程序' }}</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <uni-list>
        <uni-list-item 
          v-for="(item, index) in menuItems" 
          :key="index"
          :title="item.title" 
          :thumb="item.icon"
          clickable
          @click="handleMenuClick(item.path)"
        />
      </uni-list>
    </view>

    <!-- 退出按钮 -->
    <button class="logout-btn" v-if="isLoggedIn" @click="handleLogout">退出登录</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 用户信息
const userInfo = ref({
  nickName: '',
  avatarUrl: '',
  desc: ''
});

const isLoggedIn = ref(false);

// 菜单配置
const menuItems = ref([
  { title: '我的订单', icon: '/static/icons/order.png', path: '/pages/order/list' },
  { title: '收货地址', icon: '/static/icons/address.png', path: '/pages/address/list' },
  { title: '客服中心', icon: '/static/icons/service.png', path: '/pages/service/index' },
  { title: '设置', icon: '/static/icons/setting.png', path: '/pages/setting/index' }
]);

// 获取用户信息
const getUserProfile = () => {
  uni.getUserProfile({
    desc: '用于完善会员资料',
    success: (res) => {
      userInfo.value = {
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl,
        desc: '已认证用户'
      };
      isLoggedIn.value = true;
      uni.setStorageSync('userInfo', userInfo.value);
    },
    fail: (err) => {
      console.log('获取用户信息失败', err);
      uni.showToast({ title: '授权失败', icon: 'none' });
    }
  });
};

// 登录处理
const handleLogin = () => {
  if (isLoggedIn.value) return;
  
  uni.showModal({
    title: '提示',
    content: '需要获取您的用户信息',
    success: (res) => {
      if (res.confirm) {
        getUserProfile();
      }
    }
  });
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userInfo.value = { nickName: '', avatarUrl: '', desc: '' };
        isLoggedIn.value = false;
        uni.removeStorageSync('userInfo');
      }
    }
  });
};

// 菜单点击
const handleMenuClick = (path) => {
  if (!isLoggedIn.value) {
    uni.showToast({ title: '请先登录', icon: 'none' });
    return;
  }
  uni.navigateTo({ url: path });
};

// 页面加载时检查登录状态
onLoad(() => {
  const cachedUser = uni.getStorageSync('userInfo');
  if (cachedUser && cachedUser.nickName) {
    userInfo.value = cachedUser;
    isLoggedIn.value = true;
  }
});
</script>

<style scoped>
.my-container {
  padding: 20rpx;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #3A73F7, #6BB1FF);
  border-radius: 16rpx;
  color: white;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255,255,255,0.3);
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.desc {
  font-size: 24rpx;
  opacity: 0.8;
}

.menu-list {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.logout-btn {
  margin-top: 40rpx;
  background: #FF4D4F;
  color: white;
  border: none;
}
</style>